<template>
	<view class="container">
        <!-- 地址 -->
        <div class="address" @click="toAddress">
            <div class="icon"></div>
            <div class="info">
                <div v-if="receiver" class="info_top">
                    <div class="name">{{receiver}}</div>
                    <div class="phone">{{mobile}}</div>
                </div>
                <div class="info_bottom" :class="{'no-receiver': receiver ? false : true}">{{address || '暂无地址，快去添加把'}}</div>
            </div>
            <u-icon class="arrow" name="arrow-right" color="#666" size="28"></u-icon>
        </div>

        <!-- 订单内容 -->
        <div class="order">
            <div class="order_top">
                <div class="pic" :style="{'background-image': `url(${pic})`}"></div>
                <div class="info">
                    <div class="name">{{name}}</div>
                    <div class="info_bottom">
                        <div class="info_bottom_left">
                            <!-- <div class="price">￥{{price}}/{{chargeMethod | chargeMethodFilter}}</div> -->
                            <div class="tip">7天无理由退货</div>
                        </div>
                        <!-- <div v-if="chargeMethod != 1" class="info_bottom_right">
                            <u-number-box v-model="num" size="24" input-width="40" input-height="40"></u-number-box>
                        </div> -->
                    </div>
                </div>
            </div>   
            <div class="order_middle">
                <div class="title">
                    <div class="icon"></div>
                    <div>费用详情</div>
                </div>
                <div class="detail">
                    <div class="detail-item" v-for="(item, index) in serviceList" :key="index">
                        <div class="left">{{item.chargeJfType}}</div>
                        <div class="right">
                            <div class="price">￥{{item.chargePrice}}/{{item.chargeMethod | chargeMethodFilter}}</div>
                            <div v-if="item.chargeMethod != 1" class="num">
                                <u-number-box v-model="num" size="24" input-width="40" input-height="40" disabled-input></u-number-box>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
            <div class="order_bottom">
                <div class="title">
                    <div class="icon"></div>
                    <div>预约详情</div>
                </div>
                <div class="time">
                    <div class="time-label">预约时间</div>
                    <div class="time-value" @click="visiable = true">{{date}}</div>
                </div>
                <div class="extra">
                    <div class="extra-title">订单备注</div>
                    <u-input :custom-style="{'background-color': '#F6F6F6', 'padding': '15rpx', 'border-radius': '8rpx'}" height="150" v-model="extra" type="textarea" placeholder="选填，请先和商家商量一致"/>
                </div>
            </div>   
        </div>

        <!-- 底部 -->
        <div class="footer">
            <div class="price">合计 <span style="color: #FB7133; font-size: 36rpx">￥{{totalFee}}</span></div>
            <div class="submit" @click="submit">提交订单</div>
        </div>

        <u-picker v-model="visiable" mode="time" :default-time="date" @confirm="selectDate" confirm-color="#59C4CA"></u-picker>
        <u-toast ref="uToast" />
	</view>
</template>

<script>
import Vue from 'vue';
import moment from 'moment';

import { createPayAPI } from '../../api/pay'
import { getAddressListAPI } from '../../api/address'
const app = getApp()
export default Vue.extend({
	data() {
		return {
            id: '',
            name: '',
            // price: 0,
            // chargeMethod: 1, // 1.按次收 2.按时收 3.按天收 4.按月收
            // typeName: '',
            pic: '',
            extra: '',
            num: 1,
            visiable: false,
            serviceList: [],
            
            date: moment().add(1,'days').format('YYYY-MM-DD'),
            receiver: '',
            mobile: '',
            address: '',
            addressId: '',
            addressList: app.globalData.addressList,
		}
	},
    computed: {
        totalFee(){
            if(this.serviceList.length){
                let fee = 0
                this.serviceList.forEach(item => {
                    if(item.chargeMethod == 1){
                        fee += item.chargePrice*1 // 类型为次的，数量只能为1
                    } else {
                        fee += item.chargePrice*this.num // 类型不为次的，统一乘以数量
                    }
                })
                return fee
            } else {
                return 0
            }
        }
    },
    filters:{
        chargeMethodFilter(v){
            let arr = ['次', '时', '天', '月']
            return arr[v-1]
        }
    },
	onLoad(options) {
        this.id = options.id
        this.name = options.name
        this.pic = options.pic
        this.type = options.type
        this.serviceList = JSON.parse(options.serviceList)
        console.log(this.serviceList)
        // this.price = options.price
        // this.chargeMethod = options.chargeMethod
        // this.typeName = options.typeName
	},
    onShow(){
        if(app.globalData.sessionId){
            this.getAddressList()
        }
    },
    methods: {
        selectDate(date){
            this.date = `${date.year}-${date.month}-${date.day}`
        },
        // 查询默认地址
        getAddressList(){
            getAddressListAPI({
                sessionId: app.globalData.sessionId
            }).then(res => {
                let address
                if(app.globalData.selectedAddress){
                    address = {...app.globalData.selectedAddress}
                    app.globalData.selectedAddress = null
                } else {
                    address = res.userAddressList.find(item => item.isDefault == '1')
                }
                if(address){
                    this.receiver = address.receiver
                    this.mobile = address.mobile
                    this.address = this.getAddress(address)
                    this.addressId = address.id
                }
            }).catch(err => {
                this.$refs.uToast.show({
		    	    title: err,
		    	    type: 'error',
                })
            })
        },
        // 获取省市县名称
        getAddress(item){
            console.log(item)
            let pId = item.province
            let cId = item.city
            let dId = item.district
            let province, city, district

            province = this.addressList.find(p => p.id == pId)
            if(province) city = province.listCity.find(c => c.id == cId)
            if(city) district = city.listDistrict.find(d => d.id == dId)
            let provinceName = province ? province.name : ''
            let cityName = city ? city.name : ''
            let districtName = district ? district.name : ''
            return `${provinceName} ${cityName} ${districtName} ${item.detail}`
        },
        toAddress(){
            this.$u.route('pages/addressList/addressList', {from: 'serviceOrder'})
        },
        changeAmount(e, index){
            console.log(e, index)
            let amount = e.value
            let item = this.serviceList[index]
            item.amount = amount
        },
        submit(){
            if(!app.globalData.sessionId) {
                this.$refs.uToast.show({
				    title: '请先登录',
				    type: 'warning',
                    callback: () => {
           	            this.$u.route('pages/login/login')
                    }
                })
                return false
            } else if(!this.addressId) {
                this.$refs.uToast.show({
			        title: '前往设置默认地址',
			        type: 'warning',
                    callback: () => {
           	            this.$u.route('pages/addressList/addressList')
                    }
                })
            } else {
                this.createPay()
            }
        },
        createPay(){
            if(moment(this.date).valueOf() < moment(0, "HH").valueOf()){
                this.$refs.uToast.show({
		    	    title: '预约日期不能小于当前日期',
		    	    type: 'error',
                })
                return false
            }
            createPayAPI({
                payType: 'open',
                bizType: this.type == 1 ? 1 : 3, // 1护工 2文娱 3家政
                price: Math.floor(this.totalFee*100), 
                // price: 1, 
                amount: this.num,
                memo: this.extra,
                payMethod: '03',
                bizCode: this.id,
                bizName: this.name,
                addressId: this.addressId,
                openId: app.globalData.openId,
                sessionId: app.globalData.sessionId,
                bizInfo: JSON.stringify({
                    serviceList: this.serviceList,
                    time: this.date,
                    num: this.num
                })
            }).then(res => {
                console.log(res)
                wx.requestPayment({
                    timeStamp: res.timeStamp,
                    nonceStr: res.nonceStr,
                    package: 'prepay_id='+res.prepayId,
                    signType: 'MD5',
                    paySign: res.signStr,
                    success:() => {
                        this.$refs.uToast.show({
				            title: '支付成功',
				            type: 'success',
                            callback: () => {
           	                    this.$u.route('pages/orderList/orderList')
                            }
                        })
                    }
                })
            }).catch(err => {
                this.$refs.uToast.show({
		    	    title: err,
		    	    type: 'error',
                })
            })
        }
    }
});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    min-height: 100vh;
    background-color: #F6F6F6;
    padding: 20rpx;
}

.address{
    background-color: #fff;
    display: flex;
    padding: 40rpx 30rpx;
    align-items: center;
    margin-bottom: 20rpx;
    border-radius: 15rpx;
    .icon{
        flex: none;
        width: 64rpx;
        height: 64rpx;
        margin-right: 30rpx;
        background: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011808302.jpg') no-repeat center;
        background-size: contain;
    }
    .info{
        display: flex;
        flex: auto;
        flex-direction: column;
        .info_top{
            display: flex;
            align-items: baseline;
            margin-bottom: 15rpx;
            .name{
                font-size: 32rpx;
                color: #534F4F;
                margin-right: 10rpx;
            }
            .phone{
                font-size: 26rpx;
                color: #A7A7A7;
            }
        }
        .info_bottom{
            font-size: 30rpx;
            line-height: 45rpx;
        }
        .no-receiver{
            line-height: 100rpx;
            color: #999;
        }
    }
    .arrow{
        flex: none;
        margin: 0 20rpx;
    }
}

.order{
    background-color: #fff;
    border-radius: 15rpx;
    padding: 0 30rpx;
    .order_top{
        padding: 30rpx 0;
        display: flex;
        border-bottom: 1rpx solid #efefef;
        .pic{
            flex: none;
            width: 250rpx;
            height: 170rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .info{
            flex: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name{
                color: #707070;
                font-size: 24rpx;
                line-height: 38rpx;
            }
            .info_bottom{
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                .info_bottom_left{
                    .price{
                        margin-bottom: 8rpx;
                        color: #A7A7A7;
                        font-size: 28rpx;
                    }
                    .tip{
                        background-color: $theme-color;
                        font-size: 20rpx;
                        line-height: 35rpx;
                        padding: 0 15rpx;
                        border-radius: 8rpx;
                        color: #fff;
                    }
                }
                .info_bottom_right{
                    transform: translateY(20px);
                }
            }
        }
    }
    .order_middle{
        padding: 30rpx 0;
        border-bottom: 1rpx solid #efefef;
        .title{
            font-size: 32rpx;
            color: #534F4F;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            .icon{
                width: 20rpx;
                height: 20rpx;
                margin-right: 10rpx;
                background-image: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011858129.jpg');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
        .detail{
            font-size: 26rpx;
            line-height: 30rpx;
            margin-bottom: 10rpx;
            color: #707070;
            padding-left: 30rpx;
            .detail-item{
                display: flex;
                margin-bottom: 20rpx;
                justify-content: space-between;
                align-items: center;
                .left{
                    flex: auto;
                }
                .right{
                    flex: none;
                    width: 350rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .price{
                        color: #FB7133;
                    }
                    .num{

                    }
                }
            }
        }
    }
    .order_bottom{
        padding: 30rpx 0;
        .title{
            font-size: 32rpx;
            color: #534F4F;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            .icon{
                width: 20rpx;
                height: 20rpx;
                margin-right: 10rpx;
                background-image: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209011858129.jpg');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
        .time{
            font-size: 26rpx;
            color: #707070;
            display: flex;
            justify-content: space-between;
            margin-bottom: 30rpx;
            padding-left: 30rpx;
            .time-value{
                font-weight: bold;
                color: $theme-color;
            }
        }
        .extra{
            padding-left: 30rpx;
            .extra-title{
                font-size: 26rpx;
                color: #707070;
                margin-bottom: 20rpx;
            }
            .extra-input{
                background-color: #707070;
            }
        }
    }
}

.footer{
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 110rpx;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    box-sizing: border-box;
    padding: 20rpx;
    .num{
        color: #707070;
        margin-right: 20rpx;
    }
    .price{
        color: #707070;
        margin-right: 20rpx;
    }
    .submit{
        font-size: 36rpx;
        line-height: 70rpx;
        color: #fff;
        background-color: $theme-color;
        text-align: center;
        padding: 0 30rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
}
</style>
